<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>精美的表格样式</title>
<link rel="stylesheet" type="text/css" href="../css/global.css" />
<link rel="stylesheet" type="text/css" href="themes/table2/table.css" id="css" />
<script type="text/javascript" src="../js/jquery/jquery-1.7.2.min.js"></script>
</head>

<body>
<br/>
<p>样式类别：<input id="typeInput" type="text" />
<input type="button" onclick="btnClick()" value="Change" />
说明：样式共有19种，分别输入1-19查看效果
</p>

<div style="margin: 50px 50px;">
	<table width="90%">
	    <caption>标题</caption>
		<thead>
			<th>网名</th>
			<th>博客</th>
			<th>电邮</th>
			<th>网络硬盘</th>
			<th>QQ</th>
		</thead>
		<tr>
			<td>wallimn</td>
			<td>http://blog.csdn.net/wallimn</td>
			<td>wallimn@tom.com</td>
			<td>http://wallimn.ys168.com</td>
			<td>54871876</td>
		</tr>
		<tr class="odd">
			<td>长三江</td>
			<td>村在</td>
			<td class="odd">北京天安门</td>
			<td>东四十条</td>
			<td>21345678</td>
		</tr>
		<tr>
			<td>长三江</td>
			<td>村在</td>
			<td>北京天安门</td>
			<td>东四十条</td>
			<td>21345678</td>
		</tr>
		<tr>
			<td>长三江</td>
			<td>村在</td>
			<td>北京天安门</td>
			<td>东四十条</td>
			<td>21345678</td>
		</tr>
		<tr class="odd">
			<td>wallimn</td>
			<td>http://blog.csdn.net/wallimn</td>
			<td>wallimn@tom.com</td>
			<td>http://wallimn.ys168.com</td>
			<td>54871876</td>
		</tr>
		<tr>
			<td>长三江</td>
			<td>村在</td>
			<td>北京天安门</td>
			<td>东四十条</td>
			<td><a href="javascript:void(0)">21345678</a></td>
		</tr>
		<tr class="a1">
			<td>长三江</td>
			<td>村在</td>
			<td class="odd">北京天安门</td>
			<td>东四十条</td>
			<td><a href="table2.html">21345678</a></td>
		</tr>
		<tr>
			<td>长三江</td>
			<td>村在</td>
			<td>北京天安门</td>
			<td>东四十条</td>
			<td><a href="javascript:void(0)">21345678</a></td>
		</tr>
		<tfoot>
		    <tr>
		        <td colspan="10">底部信息</td>
		    </tr>
		</tfoot>
	</table>
</div>
<script type="text/javascript">
var constants = {
    // 所有的样式
    STYLE : [
	    "themes/table1/table.css",
	    "themes/table2/table.css",
	    "themes/table3/table.css",
	    "themes/table4/table.css",
	    "themes/table5/table.css",
	    "themes/table6/table.css",
	    "themes/table7/table.css",
	    "themes/table8/table.css",
	    "themes/table9/table.css",
	    "themes/table10/table.css",
	    "themes/table11/table.css",
	    "themes/table12/table.css",
	    "themes/table13/table.css",
	    "themes/table14/table.css",
	    "themes/table15/table.css",
	    "themes/table16/table.css",
	    "themes/table17/table.css",
	    "themes/table18/table.css",
	    "themes/table19/table.css",
	    "themes/table20/table.css",
	    "themes/table21/table.css",
	    "themes/table22/table.css",
	    "themes/table23/table.css"
    ]
};
function changeStyle(cssHref) {
	var css = document.getElementById('css');
	if (cssHref) {
	    css.setAttribute('href', cssHref);
	}
}
function aClick(idx) {
    var cssHref = constants.STYLE[idx];
    alert(cssHref);
    if (cssHref) {
        changeStyle(cssHref);
    }
}
function btnClick() {
    var idx = document.getElementById('typeInput').value;
    var cssHref = constants.STYLE[idx];
    if (cssHref) {
   	    changeStyle(cssHref);
    }
}
</script>
</body>
</html>
